import React, {Component} from 'react'
import {connect} from 'react-redux'

import {Link, withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd';

import logo from '../../assets/images/logo.png'
import menuList from '../../config/menuConfig'
import './index.less'
const SubMenu = Menu.SubMenu;

@withRouter
@connect(state=>({
    user:state.user.user
}))
class Index extends Component {
    hasAuth = (item) => {
        const {key, isPublic} = item

        const menus = this.props.user.role.menus
        const username = this.props.user.username
        /*
        1. 如果当前用户是admin
        2. 如果当前item是公开的
        3. 当前用户有此item的权限: key有没有menus中
         */
        if(username==='admin' || isPublic || menus.indexOf(key)!==-1) {
            return true
        } else if(item.children){ // 4. 如果当前用户有此item的某个子item的权限
            return !!item.children.find(child =>  menus.indexOf(child.key)!==-1)
        }

        return false
    }
    getmenunode=(menuList)=>{
        const path = this.props.location.pathname
            return menuList.map(item=>{
                if (!item.children){
                    return(
                        <Menu.Item key={item.key}>
                            <Link to={item.key}>
                                <Icon type={item.icon}/>
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    )
                }else {
                    if (item.children.find(citem => {
                       return path.indexOf(citem.key)===0
                    })){
                        this.openKey = item.key
                    }
                    return (
                        <SubMenu
                            key={item.key}
                            title={
                                <span>
                                <Icon type={item.icon}/>
                                <span>{item.title}</span>
                                </span>
                            }
                        >
                            {this.getmenunode(item.children)}
                        </SubMenu>
                    )
                }
            })

    }

    getmenunode2 = (menuList) => {
        // 得到当前请求的路由路径
        const path = this.props.location.pathname

        return menuList.reduce((pre, item) => {

            // 如果当前用户有item对应的权限, 才需要显示对应的菜单项
            if (this.hasAuth(item)) {
                // 向pre添加<Menu.Item>
                if(!item.children) {
                    // 判断item是否是当前对应的item
                    if (item.key===path || path.indexOf(item.key)===0) {
                        // 更新redux中的headerTitle状态
                        this.props.setHeadTitle(item.title)
                    }

                    pre.push((
                        <Menu.Item key={item.key}>
                            <Link to={item.key} onClick={() => this.props.setHeadTitle(item.title)}>
                                <Icon type={item.icon}/>
                                <span>{item.title}</span>
                            </Link>
                        </Menu.Item>
                    ))
                } else {
                    // 查找一个与当前请求路径匹配的子Item
                    const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
                    // 如果存在, 说明当前item的子列表需要打开
                    if (cItem) {
                        this.openKey = item.key
                    }


                    // 向pre添加<SubMenu>
                    pre.push((
                        <SubMenu
                            key={item.key}
                            title={
                                <span>
              <Icon type={item.icon}/>
              <span>{item.title}</span>
            </span>
                            }
                        >
                            {this.getMenuNodes(item.children)}
                        </SubMenu>
                    ))
                }
            }

            return pre
        }, [])
    }

    componentWillMount () {
        this.menuNodes = this.getmenunode2(menuList)
    }



    render() {
        let path = this.props.location.pathname
           //得到选中submun
        if(path.indexOf('/product')===0) { // 当前请求的是商品或其子路由界面
            path = '/product'
        }

        // 得到需要打开菜单项的key
        const openKey = this.openKey
        return (
            <div className="left-nav">
                <Link to='/' className="left-nav-header">
                    <img src={logo} alt="logo"/>
                    <h1>react后台</h1>
                </Link>

                <Menu
                    mode="inline"
                    theme="dark"
                    selectedKeys={[path]}
                    defaultOpenKeys={[openKey]}
                >

                    {
                        this.menuNodes
                    }

                </Menu>
            </div>
        );
    }
}

export default Index;
